<template>
  <div>
    <BaseQuery>
      <BaseQueryRight :span="24">
        <el-form :model="form" :inline="true">
          <el-form-item label="门店:">
            <el-select v-model="form.shopId" clearable placeholder="请选择门店">
              <el-option
                v-for="item in allShopList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="团队:">
            <el-select v-model="form.teamId" clearable placeholder="请选择团队">
              <el-option
                v-for="item in allTeamList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="姓名:">
            <el-input
              v-model="form.name"
              clearable
              placeholder="请输入查询的姓名"
            />
          </el-form-item>
          <el-form-item label="日期:">
            <el-date-picker
              v-model="date"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
      </BaseQueryRight>
    </BaseQuery>
  </div>
</template>

<script>
import { getAllShopList } from '@/api/shop/index'
import { getAllTeamList } from '@/api/team/index'
export default {
  name: 'Clients',
  props: {
    value: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      form: {},
      allShopList: [],
      allTeamList: [],
      date: []
    }
  },
  watch: {
    value: {
      handler(val) {
        this.form = val
      },
      deep: true,
      immediate: true
    },
    form: {
      handler(val) {
        this.$emit('input', val)
      },
      deep: true,
      immediate: true
    },
    date: {
      handler(val) {
        if (!val) {
          this.form.startDate = this.form.endDate = ''
          return
        }
        this.form.startDate = val[0]
        this.form.endDate = val[1]
      },
      deep: true
    },
    'form.shopId': {
      handler(val) {
        this.form.teamId = ''
        this.getAllTeamList(val)
      },
      deep: true
    }
  },
  created() {
    this.getAllShopList()
  },
  methods: {
    search() {
      this.$emit('search')
    },
    async getAllShopList() {
      const res = await getAllShopList()
      if (!res.result) return
      this.allShopList = res.data.map(item => {
        return {
          value: item.id,
          label: item.name
        }
      })
    },
    async getAllTeamList(shopId) {
      const res = await getAllTeamList({ shop_id: shopId })
      if (!res.result) return
      this.allTeamList = res.data.map(item => {
        return {
          value: item.id,
          label: item.name
        }
      })
    }
  }
}
</script>
